import { Card, Spin, Pagination, Image as AntdImage, Carousel, Tree, Space, message, Checkbox, Popconfirm, Dropdown, Menu, Row, Col } from "antd";
import { useModel, history } from "umi";
import { Button, ButtonGroup, Card as SemiCard, List } from "@douyinfe/semi-ui";
import { useReactive } from "ahooks";
import { useEffect } from "react";

import useAllCommodities from "../../hooks/commodities/useAllCommodities";
import useDeleteCommodiy from "../../hooks/commodities/useDeleteCommodiy";

const CommodityList = () => {
	const { windowInnerHeight } = useModel("global", (model) => model);
	const { loading, commodities, totalCount, loadAllCommodities } = useAllCommodities({});
	const { deleteCommodiy } = useDeleteCommodiy();

	const state = useReactive({
		pageSize: 20,
		page: 1,
	});

	useEffect(() => {
		loadAllCommodities({ first: state.pageSize || 20, offset: (state.page - 1) * state.pageSize || 0 });
	}, [state.page]);

	const goToCreatePage = (path) => {
		path && history.replace("/commodities/" + path);
	};

	const goToPage = (path, item) => {
		if (path) history.replace("/commodities/" + path, { commodity: JSON.parse(JSON.stringify(item)) });
	};

	// 窗口头部：30，应用头：60，页头：59，操作区内边距：24，卡面头：51，卡面脚：56,修正值：4
	const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

	return (
		<div>
			<SemiCard
				title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>{state.selectedClass?.ccName ? state.selectedClass.ccName : "全部"} - 商品列表</span>}
				headerStyle={{ padding: "10px 14px" }}
				shadows="always"
				bordered={false}
				size="default"
				bodyStyle={{ padding: 0, height: cardBodyHeight - 56 }}
				headerExtraContent={
					<Space>
						<Button onClick={() => goToCreatePage("create")}>创建商品</Button>
					</Space>
				}
				footerStyle={{ padding: 0 }}
				footerLine={true}
				footer={
					<div style={{ padding: 10, display: "flex", justifyContent: "space-between" }}>
						<div></div>
						<Pagination
							total={totalCount}
							showTotal={(total, range) => `当前显示第 ${range[0]}-${range[1]} 条，共 ${total} 条`}
							pageSize={state.pageSize}
							current={state.page}
							showSizeChanger={false}
							onChange={(page, pageSize) => (state.page = page)}
						/>
					</div>
				}
			>
				<List
					loading={loading}
					grid={{ gutter: 20, xs: 1, sm: 2, md: 2, lg: 2, xl: 3, xxl: 4 }}
					dataSource={commodities}
					style={{ padding: 20, height: cardBodyHeight - 56, overflow: "auto" }}
					renderItem={(item) => {
						let actions = [<a onClick={() => goToPage("detail", item)}>详情</a>, <a onClick={() => goToPage("edit", item)}>编辑</a>];
						if (item.ciPust !== true)
							actions.push(
								<Popconfirm
									title="确认要删除该商品信息吗？"
									onConfirm={() =>
										deleteCommodiy(item, (res) => {
											if (res) {
												message.success("成功删除商品");
												loadAllCommodities();
											}
										})
									}
								>
									删除
								</Popconfirm>
							);
						return (
							<List.Item key={item.ciUuid}>
								<Card
									title={item.ciClna || <span style={{ color: "#ccc" }}>无分类</span>}
									hoverable
									style={{ width: "100%" }}
									cover={
										<div style={{ marginTop: 10, width: 120, marginLeft: "auto", marginRight: "auto" }}>
											<Carousel autoplay>
												{item.ciPict.map((_item, index) => {
													return <AntdImage key={index} preview width={120} height={120} src={_item} />;
												})}
											</Carousel>
										</div>
									}
									actions={actions}
								>
									<Card.Meta style={{ textAlign: "center" }} title={item.ciAlna} description={item.ciMava ? <span>市场价: ¥{helper.numberFormat(item.ciMava, 2)}</span> : "¥"} />
								</Card>
							</List.Item>
						);
					}}
				/>
			</SemiCard>
		</div>
	);
};

export default CommodityList;
